<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>title</title>
      <link rel="stylesheet" type="text/css" href="../css/api.css"/>
      <style>
      body {
          padding-top: 1.5rem;
      }

      .header {
          width: 93%;
          height: 2.5rem;
          line-height: 2.5rem;
          padding: 0.5rem 0.8rem;
          text-align: center;
          border-bottom: 1px solid rgb(243, 243, 243, 0.5);
          background-color: #fff;
          position: fixed;
          top:1.5rem;
      }

      .header_img {
          width: 10%;
          height: 58%;
          float: left;
          margin-top: 0.5rem;
      }

      .header_img img {
          width: 100%;
          height: 100%;
      }

      .header h3{
        line-height: 3rem;
        width: 90%;
        text-align: center;
      }
      .nav{
        width: 93%;
        height: 1.5rem;
        line-height: 1.5rem;
        padding: 0.5rem 0.8rem;
        margin-top: 4rem;
      }
      .nav ul{
        width: 100%;
        height: 1.5rem;
      }
      .nav ul li{
        width: 16%;
        height: 1.8rem;
        line-height: 1.8rem;
        border-right: 0.1rem solid rgb(223,223,223,0.3);
        text-align: center;
        float: left;
      }
      .nav ul li a{
        list-style: none;
        text-decoration: none;
        font-size: 1rem;
        color: #ccc;
      }
      .math{
        width: 90%;
        background-color: rgb(242, 242, 242, 0.5);
        padding: 0.2rem 1rem;
      }
      .math_one{
        width: 100%;
        height:9rem;
        background-color: #fff;
        margin-top: 0.8rem;
        border-radius: 0.5rem;
      }
      .one_img{
        width: 35%;
        height: 8.5rem;

        float: left;
        margin-top: 0.5rem;
        margin-left: 0.2rem;
      }
      .one_img img{
        width: 100%;
        height: 100%;
          border-radius: 0.8rem;
      }
      .one_text{
        width: 59%;
        padding:0.5rem 0rem 0.5rem 1rem;
        float: left;
      }
      .tp{
        width: 60%;
        height: 1.5rem;
        border: 1px solid #40cccc;
        color: #40cccc;
        margin-top: 0.3rem;
        line-height: 1.5rem;
        border-radius: 0.5rem;
        text-align: center;
        font-size: 0.9rem;
      }
      .ttp{
        width: 100%;
        height: 1.5rem;
        margin-top: 0.5rem;
        line-height: 1rem;
        font-size: 0.8rem;
        color: #ccc;
      }
      </style>
  </head>
  <body>
    <div class="header">
        <div class="header_img">
            <img src="../image/u18.png" alt="">
        </div>
        <h3>我的课程</h3>
    </div>
    <!-- 分类 -->
    <div class="nav">
      <ul>
        <li><a href="#" id="li">全部</a></li>
        <li><a href="#">钢琴</a></li>
        <li><a href="#">运动</a></li>
        <li><a href="#">英语</a></li>
        <li><a href="#">古筝</a></li>
        <li><a href="#">益智</a></li>
      </ul>
    </div>
    <!-- 内容 -->
    <div class="math" onclick="openwin('quanbu_kcxxy')">
      <div class="math_one">
        <div class="one_img">
          <img src="../image/u64.png" alt="">
        </div>
        <div class="one_text">
          <h4>青少年英语课程</h4>
          <p class="tp">3-6岁幼儿英语</p>
          <p class="ttp">多元教学法趣味学英语，听讲读写能力综合培养</p>
          <span style="font-size:1.5rem;color:red;float:left;margin-left:70%;
          margin-top:1rem">￥78</span>
        </div>
      </div>
      <div class="math_one">
        <div class="one_img">
          <img src="../image/u64.png" alt="">
        </div>
        <div class="one_text">
          <h4>青少年英语课程</h4>
          <p class="tp">3-6岁幼儿英语</p>
          <p class="ttp">多元教学法趣味学英语，听讲读写能力综合培养</p>
          <span style="font-size:1.5rem;color:red;float:left;margin-left:70%;
          margin-top:1rem">￥78</span>
        </div>
      </div>
      <div class="math_one">
        <div class="one_img">
          <img src="../image/u64.png" alt="">
        </div>
        <div class="one_text">
          <h4>青少年英语课程</h4>
          <p class="tp">3-6岁幼儿英语</p>
          <p class="ttp">多元教学法趣味学英语，听讲读写能力综合培养</p>
          <span style="font-size:1.5rem;color:red;float:left;margin-left:70%;
          margin-top:1rem">￥78</span>
        </div>
      </div>
      <div class="math_one">
        <div class="one_img">
          <img src="../image/u64.png" alt="">
        </div>
        <div class="one_text">
          <h4>青少年英语课程</h4>
          <p class="tp">3-6岁幼儿英语</p>
          <p class="ttp">多元教学法趣味学英语，听讲读写能力综合培养</p>
          <span style="font-size:1.5rem;color:red;float:left;margin-left:70%;
          margin-top:1rem">￥78</span>
        </div>
      </div>
    </div>
  </body>
  <script type="text/javascript" src="../script/api.js"></script>
  <script type="text/javascript" src="../script/common.js"></script>
  <script type="text/javascript">
      apiready = function(){

      };
  </script>
  </html>
